<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猫眼电影</title>
    <style>
        *{margin:0;padding:0;box-sizing:border-box;}
        .container{
            width: 800px;
            margin: 50px auto;
        }
        h2{
            color: rgb(240, 93, 94);
        }
        .title{
            display:flex;
            justify-content: space-between;
            align-items: center;
        }

        .item{
            width: 25%;
            padding: 0 10px;
            float:left;
            margin-bottom: 20px;
        }
        img{
            width: 100%;
        }
        .profile{
            position:relative;
        }

        .type{
            position:absolute;
            left: -3px;
            top: 3px;
            background: #0084ff;
            padding: 5px;
            color:white;
            font-weight: bold;
            font-style: italic;
            font-size: 12px;
        }
        .bottom{
            position:absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 10px;
            display:flex;
            justify-content: space-between;
            color:white;
            background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6))
        }
        .gou{
            width: 100%;
            text-align:center;
            padding: 10px 0;
            border:solid 1px #ddd;
            font-size: 12px ;
            letter-spacing: 10px;
        }
        .move-list{
            margin: 0 -10px;
        }
        hr{
            margin: 10px 0;
        }
    </style>
</head>

<body>
    <div id="root">
        
    </div>

    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>

    <script type="text/babel">
        // https://maoyan.com/?utm_source=meituanweb    猫眼电影热映榜
        let movies = [
            {
                title: '怒火·重案',
                img: 'https://p1.meituan.net/moviemachine/51b193283628a62b85ba31ddc818ffde1560410.jpg@320w_440h_1e_1c',
                rate: 9.5,
                type: '3DIMAX',
                canBuy: true
            },
            {
                title: '盛夏未来',
                img: 'https://p0.meituan.net/movie/056cce783466d9531ad736068c2e134e4100879.jpg@320w_440h_1e_1c',
                rate: 9.2,
                type: '2DIMAX',
                canBuy: true
            }, {
                title: '白蛇2：青蛇劫起x',
                img: 'https://p0.meituan.net/movie/cba20984e8e4423598913077e515b6121686728.jpg@320w_440h_1e_1c',
                rate: 9.1,
                type: '3D',
                canBuy: true
            }, {
                title: '中国医生',
                img: 'https://p1.meituan.net/movie/6876f0a4db61cab652fdc3d3ed14e94c4924473.jpg@320w_440h_1e_1c',
                rate: 9.4,
                type: '2D',
                canBuy: true
            },
            {
                title: '贝肯熊2：金牌特工',
                img: 'https://p0.meituan.net/movie/70ed5d23afc45de7749dfafa2a8a1bd23977288.jpg@320w_440h_1e_1c',
                rate: 8.9,
                type: '3DIMAX',
                canBuy: true
            },
            {
                title: '流浪猫鲍勃2：鲍勃的礼物',
                img: 'https://p1.meituan.net/mmdb/defb0d5f7845b6a2b3e7444e03afa5d7278009.jpg@320w_440h_1e_1c',
                rate: 8.0,
                canBuy: true
            },
            {
                title: '1921',
                img: 'https://p1.meituan.net/movie/63cb3dbbaff624b236b2e22b2ee59cff1553093.jpg@320w_440h_1e_1c',
                rate: 9.4,
                canBuy: true
            },
            {
                title: '新大头儿子和小头爸爸4：完美爸爸',
                img: 'https://p0.meituan.net/movie/df89b11a57dd63760a6c3d544c61e4a83956828.jpg@320w_440h_1e_1c',
                rate: 8.8,
                canBuy: true
            }
        ]
        
        let jingdian = [
            {
                title: '怒火·重案',
                img: 'https://p1.meituan.net/moviemachine/51b193283628a62b85ba31ddc818ffde1560410.jpg@320w_440h_1e_1c',
                rate: 9.5,
                type: '3DIMAX',
                canBuy: false
            },
            {
                title: '盛夏未来',
                img: 'https://p0.meituan.net/movie/056cce783466d9531ad736068c2e134e4100879.jpg@320w_440h_1e_1c',
                rate: 9.2,
                type: '2DIMAX',
                canBuy: false
            }, {
                title: '白蛇2：青蛇劫起x',
                img: 'https://p0.meituan.net/movie/cba20984e8e4423598913077e515b6121686728.jpg@320w_440h_1e_1c',
                rate: 9.1,
                type: '3D',
                canBuy: false
            }, {
                title: '中国医生',
                img: 'https://p1.meituan.net/movie/6876f0a4db61cab652fdc3d3ed14e94c4924473.jpg@320w_440h_1e_1c',
                rate: 9.4,
                type: '2D',
                canBuy: false
            }]
        
        //单个电影的组件
        class MovieItem extends React.Component {
            //渲染组件
            render(){
                //获取组件外部传入的属性数据
                let {img, type, title, rate, canBuy} = this.props;

                return ( 
                    <div className="item">
                        <div className="profile">
                            <img src={img} alt="" />
                            {type && <div className="type">{type}</div>}
                            <div className="bottom">
                                <div className="name">{title}</div>
                                <div className="rate">{rate}</div>
                            </div>
                        </div>
                        {canBuy && <div className="gou">购票</div>}
                    </div>
                )
            }
        }
    
        //创建类式组件
        class Movie extends React.Component{
            render(){
                return <div className="container">
                    <div className="title">
                        <h2>正在热映</h2>
                        <p>全部</p>
                    </div>
                    <hr />
                    <div className="move-list">
                        {
                            movies.map((item, index) => {
                                return <MovieItem  {...item} key={index} />
                            })
                        }
                    </div>

                    <div style={{clear:'both'}}></div>
                    <div className="title">
                        <h2>经典电影</h2>
                        <p>全部</p>
                    </div>
                    <hr />
                    <div className="move-list">
                            {
                                jingdian.map((item, index) => {
                                    return <MovieItem {...item}  key={index} />
                                })
                            }
                        </div>
                </div>
            }
        }

        //渲染
        ReactDOM.render(<Movie />, document.querySelector('#root'));
    </script>
</body>

</html>